import React from 'react'
import {Carousel, Popover, Menu, Dropdown} from 'antd';
import {SketchPicker} from 'react-color'
import Const from "../Const";
import arrayUtil from "../basic/utils/arrayUtil";
import PixelCtrl from "./PixelCtrl";
import pointColorData from "../assets/data/pointColorData";
import {connect} from "react-redux";

class PixelPanel extends React.Component {

    carouselRef = null;

    constructor(props) {
        super(props);
        this.carouselRef = React.createRef();
        this.state = {
            colorList: [],
            selectPoint: null
        }
    }

    initPanelData = () => {
        let arr = [];
        for (let i = 0; i < 58; i++) {
            let jArr = [];
            for (let j = 0; j < 79; j++) {
                jArr.push({});
            }
            arr.push(jArr)
        }
        // arr[1][1].color = '#ff00ff';

        let colorList = [
            '#efa',
            '#eab',
            '#aab',
            '#eda',
            '#f2f',
            '#f22',
            '#daa',
            '#419',
            '#eab',
            '#aab',
            '#eda',
            '#f2f',
            '#f22',
            '#daa',
            '#daa',
            '#daa',
            '#daa',
            '#daa',
            '#419',
            '#eab',
            '#aab',
            '#eda',
            '#f2f',
            '#f22',
            '#daa',
            '#419',
        ];
        colorList = arrayUtil.splitArr(colorList, 10);
        for (let item of pointColorData) {
            if (arr[item.x] && arr[item.x][item.y]) {
                arr[item.x][item.y].color = '#' + item.color;
                arr[item.x][item.y].x = item.x;
                arr[item.x][item.y].y = item.y;
            }
        }
        this.props.initPixelData(arr);
        this.setState({
            colorList
        })
    }

    //组件被render之后调用
    componentDidMount() {
        this.initPanelData();
    }

    //组件被移除DOM之后调用
    componentWillUnmount() {
    }

    pixelClick(item) {
        let {selectPoint} = this.props;
        if (selectPoint) {
            let {x, y} = selectPoint;
            this.props.deleteHColorByXy(x, y);
        }
        this.props.setSelectPoint(item);
        let {x, y} = item;
        this.props.addHColorByXy(x, y, 'red');
    }

    carouselEvent(event) {
        this.carouselRef.current[event]();
    }

    onColorChange(colorCode) {
        console.log(colorCode)
    }

    //选择颜色
    selectColor = (color) => {
        return (
            <div>
                <p>{color}</p>
                <p>Content</p>
            </div>
        )
    }
    renderRightMenu = (item) => {
        return (
            <Menu>
                <Menu.Item key="0">设置颜色</Menu.Item>
                <Menu.Item key="1">收藏颜色</Menu.Item>
            </Menu>
        )
    }

    render() {
        let { colorList} = this.state;
        let {pixelData} = this.props;

        return (
            <div className={'pixel-warp'}>
                <div className='pixel-panel'>
                    {
                        pixelData.map((line, lIndex) => {
                            return (
                                <div className='pixel-line' key={lIndex}>
                                    {
                                        line.map((item, index) => {
                                            let hColor = this.props.hColorPixel[`${item.x}_${item.y}`];
                                            let style = {background: item.color};
                                            if (hColor) {
                                                style['borderColor'] = hColor;
                                            }
                                            return (
                                                <Dropdown overlay={this.renderRightMenu(item)} key={index}
                                                          trigger={['contextMenu']}>
                                                    <div
                                                        className={`pixel-box ${hColor ? 'select' : ''}`}
                                                        style={style}
                                                        onContextMenu={this.pixelClick.bind(this, item)}
                                                        onClick={this.pixelClick.bind(this, item)}/>
                                                </Dropdown>
                                            )
                                        })
                                    }
                                </div>
                            )
                        })
                    }
                </div>
                <PixelCtrl/>
            </div>
        )
    }
}

export default connect(
    (state, props) => {
        return {...state}
    },
    (dispatch) => {
        return {
            initPixelData(data) {
                dispatch({
                    type: 'initPixelData',
                    data: data
                })
            },
            setSelectPoint(point) {
                dispatch({
                    type: 'setSelectPoint',
                    data: point
                })
            }, deleteHColorByXy(x, y) {
                dispatch({
                    type: 'deleteHColorByXy',
                    data: {x, y}
                })
            }, addHColorByXy(x, y, color) {
                dispatch({
                    type: 'addHColorByXy',
                    data: {x, y, color}
                })
            }
        }
    }
)(PixelPanel)
